<template>
  <div>
    <!-- 仓储 2018/1/24 11:59 zhangQ -->
    <Row style="margin-top: 20px;">
      <Form ref="stationForm" :model="stationForm" inline>
        <FormItem>
          <Cascader :data="railwayList" change-on-select v-model="queryRailway"
                    style="width: 40vh;"></Cascader>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSearchRailway">查询</Button>
        </FormItem>
      </Form>
      <i-col :span="24">
        <Card>
          <!-- 场站地图 -->
          <div id="allmap" class="stationMap" style="height: 400px;"></div>
        </Card>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import { getStationMemberList } from '@api/backEnd/station'
  import { getRailwayList } from '@api/frontEnd'
  import { MP } from '@components/bmap'

  export default {
    name: 'storage',
    data () {
      let ak = 'HYPTMfzFtQSrQzrSYd54Lv6OnOsCCexo' // 百度地图ak
      let stationForm = {
        railwayBureauCode: '',
        transportCenter: '',
        stationCode: ''
      }
      let railwayList = []
      let queryRailway = []
      let datas = { ak, stationForm, railwayList, queryRailway }
      return datas
    },
    methods: {
      handleSearchRailway () {
        this.stationForm.railwayBureauCode = this.queryRailway[0]
        this.stationForm.transportCenter = this.queryRailway[1]
        this.stationForm.stationCode = this.queryRailway[2]
        getStationMemberList(this.stationForm).then(res => {
          if (res.data.isSuccess === 1) {
            MP(this.ak).then(BMap => {
              if (!BMap) {
                return
              }
              let map = new BMap.Map('allmap')
              let point = new BMap.Point(87.606043, 43.832012)
              let navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
                // 启用显示定位
                enableGeolocation: true
              })
              map.addControl(navigationControl)
              map.centerAndZoom(point, 6)
              map.enableScrollWheelZoom()
              // 编写自定义函数,创建标注
              let addMarker = (points) => {
                for (let i = 0, len = res.data.data.length; i < len; i++) {
                  let sContent =
                    // div块不要删除，后面有该id的onload事件
                    '<div id="imgDemo"><h4 style="margin:0 0 5px 0;padding:0.2em 0">' + res.data.data[i].stationName + '</h4>' +
                    '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">剩余货位：' + res.data.data[i].surplusSpace + '</p>' +
                    '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">剩余面积：' + res.data.data[i].surplusArea + '</p>' +
                    '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">更新时间：' + res.data.data[i].updateTime + '</p>' +
                    '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">联系人：' + res.data.data[i].userName + '</p>' +
                    '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">联系电话：' + res.data.data[i].mobile + '</p>' +
                    '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">地址：' + res.data.data[i].address + '</p>' +
                    '</div>'
                  let point = new BMap.Point(parseFloat(points[i].stationLat), parseFloat(points[i].stationLng))
                  let marker = new BMap.Marker(point)
                  let infoWindow = new BMap.InfoWindow(sContent)
                  map.addOverlay(marker)
                  marker.addEventListener('mouseover', function () {
                    this.openInfoWindow(infoWindow)
                    document.getElementById('imgDemo').onload = function () {
                      infoWindow.redraw()
                    }
                  })
                }
              }
              addMarker(res.data.data)
            })
          }
        })
      },
      loadMapData () {
        getStationMemberList(this.stationForm).then(res => {
          if (res.data.isSuccess === 1) {
            MP(this.ak).then(BMap => {
              if (!BMap) {
                return
              }
              let map = new BMap.Map('allmap')
              let point = new BMap.Point(87.606043, 43.832012)
              let navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
                // 启用显示定位
                enableGeolocation: true
              })
              map.addControl(navigationControl)
              map.centerAndZoom(point, 6)
              map.enableScrollWheelZoom()
              // 编写自定义函数,创建标注
              let addMarker = (points) => {
                for (let i = 0, len = res.data.data.length; i < len; i++) {
                  let sContent =
                    // div块不要删除，后面有该id的onload事件
                    '<div id="imgDemo"><h4 style="margin:0 0 5px 0;padding:0.2em 0">' + res.data.data[i].stationName + '</h4>' +
                    '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">剩余货位：' + res.data.data[i].surplusSpace + '</p>' +
                    '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">剩余面积：' + res.data.data[i].surplusArea + '</p>' +
                    '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">更新时间：' + res.data.data[i].updateTime + '</p>' +
                    '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">联系人：' + res.data.data[i].userName + '</p>' +
                    '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">联系电话：' + res.data.data[i].mobile + '</p>' +
                    '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">地址：' + res.data.data[i].address + '</p>' +
                    '</div>'
                  let point = new BMap.Point(parseFloat(points[i].stationLat), parseFloat(points[i].stationLng))
                  let marker = new BMap.Marker(point)
                  let infoWindow = new BMap.InfoWindow(sContent)
                  map.addOverlay(marker)
                  marker.addEventListener('mouseover', function () {
                    this.openInfoWindow(infoWindow)
                    document.getElementById('imgDemo').onload = function () {
                      infoWindow.redraw()
                    }
                  })
                }
              }
              addMarker(res.data.data)
            })
          }
        })
      },
      getRailway () {
        getRailwayList().then(res => {
          if (res.data.isSuccess === 1) {
            this.railwayList = res.data.data
          }
        })
      }
    },
    mounted () {
      this.loadMapData()
      this.getRailway()
    }
  }
</script>
<style scoped>

</style>
